<script lang="ts" setup>
import { reactive, ref, inject } from 'vue'
import userService from '@/api/userService'
import router from '@/router'
import { encryptedData } from '@/utils/crypto'
import appStore from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, Action } from 'element-plus'

import PassHeader from '@/components/PassHeader.vue'
import { TabMenuItem } from '@/types/public'
import { passwordCheck } from '@/utils'

const checked1 = ref(true)
const select = ref('+86')

type user = {
  username: string
  password: string
  dnewPassword: string
  captcha: string
  phoneNumber: string
  phoneVerificationCode: string
}
const formLabelAlign: user = reactive({
  username: '',
  password: '',
  dnewPassword: '',
  captcha: '',
  phoneNumber: '',
  phoneVerificationCode: ''
})
let imgUrl = ref('')
const getCaptcha = async () => {
  let res = await userService.getCaptcha()
  imgUrl.value = 'data:image/jpg;base64,' + res.data.data
}
getCaptcha()

const tabMenu = reactive<Array<TabMenuItem>>([
  {
    id: 'user',
    text: '账号密码登录'
  },
  {
    id: 'phome',
    text: '手机验证码登录'
  }
])
const call = () => {
  ElMessageBox.alert('联系管理员XXX,电话:xxxxxxxxxxx', {
    confirmButtonText: 'OK',
    callback: () => { }
  })
}

const goLogin = async () => {
  router.push({ name: 'Login' })
}

const surePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (value !== formLabelAlign.password) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}
const sureOldPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
    return
  }
  if (!passwordCheck(value)) {
    callback(new Error('密码至少包含数字、大小写字母、特殊字符'))
  } else {
    if (value.length < 8) {
      callback(new Error('长度至少为8'))
    } else {
      callback()
    }
  }
}
const surePhoneNumber = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('手机号不能为空'))
  } else {
    if (!/^1[3456789]\d{9}$/.test(value)) {
      callback(new Error('手机号格式错误！'))
    } else {
      callback()
    }
  }
}
const rules = reactive<FormRules>({
  oldPassword: [
    {
      trigger: 'blur',
      validator: sureOldPass
    }
  ],

  password: [
    { trigger: 'blur', validator: sureOldPass },
  ],
  username: { trigger: 'blur', message: '账号不能为空', required: true },
  dnewPassword: [{ trigger: 'blur', validator: surePass }],
  phoneNumber: { trigger: 'blur', validator: surePhoneNumber, required: true },
  phoneVerificationCode: { trigger: 'blur', message: '手机验证码不能为空', required: true },
  captcha: { trigger: 'blur', message: '图形验证码不能为空', required: true }
})

const param = reactive({
  resconfig: {
    username: '',
    oldPassword: '',
    password: '',
    dnewPassword: '',
    captcha: ''
  }
})
const firstRef = ref<FormInstance>()
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      userService
        .registe(
          formLabelAlign.username,
          encryptedData(formLabelAlign.password),
          formLabelAlign.captcha,
          formLabelAlign.phoneNumber,
          formLabelAlign.phoneVerificationCode
        )
        .then((res) => {
          if (res.data.code) {
            ElMessage.error(res.data.msg)
          } else {
            ElMessage.success(res.data.msg)
          }
        })
    }
  })
}
</script>
<template>
  <pass-header></pass-header>
  <div id="login">
    <pass-header></pass-header>
    <div class="login-head"></div>
    <div class="content-box">
      <div class="login-title">
        <span>注册PRIM平台通行证</span><el-link class="denglu" type="primary" style="line-height: 34px; font-weight: 400"
          @click="goLogin">已有账号，去登陆></el-link>
      </div>
      <div class="login-box">
        <el-form ref="firstRef" label-position="right" label-width="100px" :model="formLabelAlign" :rules="rules"
          style="margin-top: 20px">
          <el-form-item label-width="0" prop="username">
            <el-input v-model="formLabelAlign.username" style="width: 480px; height: 40px" placeholder="请输入账号名称" />
          </el-form-item>
          <el-form-item label-width="0" prop="password">
            <el-input v-model="formLabelAlign.password" type="password" style="width: 480px; height: 40px" show-password
              placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label-width="0" prop="dnewPassword">
            <el-input v-model="formLabelAlign.dnewPassword" type="password" style="width: 480px; height: 40px"
              show-password placeholder="请确认密码" />
          </el-form-item>
          <el-form-item label-width="0" class="captcha" prop="captcha">
            <el-input v-model="formLabelAlign.captcha" style="height: 40px; width: 300px; margin-top: 0px"
              class="w-50 m-2" placeholder="请输入图片验证码">
              <template #prefix>
                <svg-icon icon="chech"></svg-icon>
              </template>
            </el-input>
            <img :src="imgUrl" alt="" class="img" style="margin-left: 10px" />
            <svg-icon icon="refash" class-name="icon-refash" style="cursor: pointer; width: 40px; height: 40px"
              @click="getCaptcha"></svg-icon>
          </el-form-item>
        </el-form>
        <div class="tips">
          <span><el-checkbox v-model="checked1" laber="Option1" /></span><span> &nbsp 我已阅读并同意</span><span class="more"
            @click="call">PRIM服务协议、</span><span class="more" @click="call">PRIM隐私声明</span><span>和</span><span class="more"
            @click="call">PRIM账号协议</span>
        </div>
        <button class="blogtn new"
          style="width: 480px; height: 40px; margin-top: 45px; margin-bottom: 80px; font-size: 14px"
          @click="login(firstRef)">
          同意协议并提交
        </button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#login {
  background-color: $border-color;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;

  .blogtn {
    width: 480px;
    height: 40px;
    margin-top: 10px;
    cursor: pointer;
  }

  .icon-refash {
    width: 40px;
    height: 40px;
  }

  .login-head {
    height: 90px;
    display: flex;
    align-items: center;
    margin-bottom: 70px;

    .head-box {
      height: 30px;
      display: flex;
      align-items: center;
      color: $text-color;
    }

    .icon-box {
      width: 30px;
      height: 30px;
      margin: 0 15px 0 40px;
    }

    .project-title {
      border: 8px;
      color: #0e162a;
      font-size: 50px;
    }

    .line {
      width: 1px;
      background-color: $text-color;
      height: 30px;
      margin: 0 20px;
    }
  }

  .pass {
    font-size: 22px;
  }
}

.content-box {
  background: $blank-color;
  // height: 640px;
  width: 1200px;
  margin: 0 auto;

  .login-title {
    height: 69px;
    display: flex;
    padding: 0 30px;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: $text-color;
    border-bottom: 1px solid $border-color;
    justify-content: space-between;

    .denglu {
      font-size: 14px;
      color: #0247ea;
    }
  }

  .login-box {
    margin: 0 auto;
    width: 480px;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;

    .more-login {
      display: flex;
      margin-top: 30px;
      color: $action-color;
      font-size: 14px;
      height: 14px;
      line-height: 14px;
      cursor: pointer;

      .line {
        width: 1px;
        margin: 0 12px;
        background-color: $text-color;
      }
    }

    .tips {
      width: 440px;
      margin-top: 31px;
      font-size: 14px;
      color: $action-color;

      .more {
        color: $main-color;
        cursor: pointer;
      }
    }
  }
}

.my-header {
  display: flex;
  justify-content: space-between;
}

.input-with-select {
  .area-select {
    background-color: var(--el-fill-color-blank);

    :deep(.el-input) {
      height: 38px;

      .el-input__wrapper {
        box-shadow: none;
      }
    }
  }

}

:deep(.el-input__wrapper) {
  background-color: #fafbfe;
}


.captcha {
  .img {
    width: 140px;
    margin-left: 20px;
    height: 40px;
  }

  :deep(.el-form-item__content) {
    flex-wrap: nowrap;
  }
}
</style>
